import {Button, Form, Input, Space, Switch,} from 'antd';
import '../user.less'
import {getUserInfoById, postUserUpdateAdmin} from '../../../../api/admin/user.js'
import {useEffect} from "react";

import {useLocation} from 'react-router-dom'


const layout = {
    labelCol: {
        span: 5,
    }, wrapperCol: {
        span: 19,
    },
};
const tailLayout = {
    wrapperCol: {
        // offset: 4,
        span: 24,
    },
};

const AddUpdate = () => {
    const {state} = useLocation()
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log(values);
        postUserUpdateAdminList()
    };

    useEffect(() => {
        if (state) {
            getUserInfoByIdList()
        }
    }, [])

    const getUserInfoByIdList = () => {
        // console.log(state.id,'id')
        getUserInfoById(state.id)
            .then(res => {
                const {data, code} = res
                if (code === 200) {
                    console.log(data, 'data')
                    form.setFieldsValue({username: data.username})
                    form.setFieldsValue({nickname: data.nickName})
                    form.setFieldsValue({email: data.email})
                    form.setFieldsValue({phoneNumber: data.phoneNumber})
                    form.setFieldsValue({isAdmin: data.isAdmin})
                }
            })
            .catch(err => {
                console.log(err, 'err')
            })
    }

    const postUserUpdateAdminList = () => {
        postUserUpdateAdmin()
            .then(res => {
                console.log(res, 'res')
            })
    }

    return (<>
        <div className="title"> 用户{state ? '编辑' : '新增'}</div>
        <div className="content">
            <Form
                {...layout}
                form={form}
                name="control-hooks"
                onFinish={onFinish}
                style={{
                    width: 500,
                }}
            >
                <Form.Item
                    name="username"
                    label="用户名"
                    rules={[{
                        required: true,
                    },]}
                >
                    <Input placeholder="请输入"/>
                </Form.Item>
                <Form.Item
                    name="nickname"
                    label="昵称"
                    rules={[{
                        required: true,
                    },]}
                >
                    <Input placeholder="请输入"/>
                </Form.Item>
                <Form.Item
                    name="email"
                    label="邮箱号码"
                    rules={[{
                        required: true,
                    },]}
                >
                    <Input placeholder="请输入"/>
                </Form.Item>
                <Form.Item
                    name="phoneNumber"
                    label="手机号码"
                    rules={[{
                        required: true,
                    },]}
                >
                    <Input placeholder="请输入"/>
                </Form.Item>
                <Form.Item
                    name="isAdmin"
                    label="是否管理员"
                    rules={[{
                        required: true,
                    },]}
                >
                    <Switch/>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Space>
                        <Button type="primary" htmlType="submit" style={{width: '500px'}}>
                            提交
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    </>)
}

export default AddUpdate 